<template>
  <div class="container" @click="clickHandle" @mousemove="mousemove" @contextmenu="rightClick">
    <div class="flex-container">
      <div class="nav-tab-container">
        <NavTabContainer />
      </div>
      <div class="map-feature-edit">
        <FeatureEdit />

      </div>
    </div>
    <DragFeature :top="y" :left="x" />
  </div>
</template>
<script>
import NavTabContainer from './home/NavTabContainer'
import FeatureEdit from './home/FeatureEdit2'
import DragFeature from './home/DragFeature'
import { mapGetters } from 'vuex'
export default {
  components: { NavTabContainer, FeatureEdit, DragFeature },
  data() {
    return {
      x: 0,
      y: 0
    }
  },
  computed: {
    ...mapGetters(['activeFeature'])
  },
  mounted() {
    // this.$refs.container.oncontextmenu = e => {}
  },
  methods: {
    clickHandle(e) {
      // console.log(e)
      this.$store.commit('setActiveFeature', null)
    },
    mousemove(e) {
      // console.log(e)
      this.x = e.clientX
      this.y = e.clientY
    },
    rightClick(e) {
      if (this.activeFeature != null) {
        this.$store.commit('setActiveFeature', null)
        e.preventDefault()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.flex-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  position: relative;
  .nav-tab-container {
    width: 100%;
    height: 100%;
  }
  .map-feature-edit {
    width: 300px;
    height: 100%;
    flex-shrink: 0;
  }
}
</style>
